<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="postcss">
  @svg 1px-border{
    width: 4px;
    height: 4px;
    @rect {
      fill: transparent;
      width: 100%;
      height: 100%;
      stroke-width: 25%;
      stroke: var(--color, black);
    }
  }
  [border-1px]{
    border: 1px solid;
    border-image: svg(1px-border param(--color #E6E6E6)) 1 stretch;
  }
  [border-bottom-1px] {
    border: 0;
    border-bottom: 1px solid;
    border-image: svg(1px-border param(--color #E6E6E6)) 1 stretch;
  }
  [border-top-1px] {
    border: 0;
    border-top: 1px solid;
    border-image: svg(1px-border param(--color #E6E6E6)) 1 stretch;
  }
  [border-top-bottom-1px] {
    border: 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-image: svg(1px-border param(--color #E6E6E6)) 1 stretch;
  }
  [border-left-1px] {
    border: 0;
    border-left: 1px solid;
    border-image: svg(1px-border param(--color #E6E6E6)) 1 stretch;
  }
  [border-right-1px] {
    border: 0;
    border-right: 1px solid;
    border-image: svg(1px-border param(--color #E6E6E6)) 1 stretch;
  }
</style>
